<template>
    <div class="container" @click="handleClose">
        <div class="wrapper">
            <swiper :options="swiperOptions">
                <!-- slides -->
                <swiper-slide 
                    v-for="(item, index) in imgs"
                    :key="index"
                    > 
                    <img class="img" :src="item" alt="">
                </swiper-slide>
               
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
    name:'CommonGallary',
    props: {
      imgs: {
          type: Array,
          default () {
              return []
          }
      }  
    },
    data () {
         return{
          swiperOptions:{
            //    autoplay: 2000,
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                loop:true,
                observeParents:true,
                observer:true
          },
        }
    },
    methods: {
        handleClose(){
            this.$emit('close')
        }
    }
}
</script>

<style lang="stylus" scoped>
    .container >>> .swiper-container{
        overflow:inherit
    }
    .container
        display:flex
        flex-direction:column
        justify-content:center
        z-index:99
        position:fixed
        left:0
        right:0
        top:0
        bottom:0
        background:#000
        .wrapper
            // overflow:hidden
            height:0
            width:100%
            padding-bottom:100%
            .img
                width:100%
            .swiper-pagination{
                color:#fff
                bottom:-1rem
            }
    
</style>